<template>
  <div style="padding: 15px;">
    <el-form ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="选择项目" prop="projectId">
        <el-select v-model="selectValue" placeholder="请选择" @change="selectProject">
          <el-option v-for="item in options" :key="item.projectId" :label="item.projectName" :value="item.projectId">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <!-- 树 数据 -->
    <el-tree :data="treeData" :props="treeProps" highlight-current
             :expand-on-click-node="false" default-expand-all
             style="display:inline-block;">
       <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.data.label }}</span>
        <span style="margin-left: 20px; ">
          <el-button v-if="node.level != 4" type="text" size="mini" @click="() => append(node, data)">添加</el-button>
          <el-button v-if="node.level != 1" type="text" size="mini" @click="() => edit(node, data)">修改</el-button>
          <el-button v-if="node.level != 1&&!data.children" type="text" size="mini"
                     @click="() => remove(node, data)">删除</el-button>
        </span>
      </span>
    </el-tree>

    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="open" width="30%">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="上级" prop="parkPid">
          <span v-text="form.parentName"></span>
        </el-form-item>
        <el-form-item label="工程复盘标题" prop="recoveryTitle">
          <el-input v-model="form.recoveryTitle" placeholder="请输入工程复盘标题" />
        </el-form-item>
        <el-form-item label="排序" prop="recoverySort">
          <el-input v-model="form.recoverySort" placeholder="请输入排序" />
        </el-form-item>
        <el-form-item label="树等级" prop="level">
          <el-input v-model="form.level" readonly />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
					<el-button @click="open = false">取 消</el-button>
					<el-button type="primary" @click="save('form')">确 定</el-button>
				</span>
    </el-dialog>

  </div>
</template>

<script>
import {listProjectByUserId,} from "@/api/project/project";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getRecoveryTree, addRecovery, updateRecovery, delRecovery, getRecovery} from "@/api/project/recovery";

export default {
  name: "Recovery",
  components: {
    Treeselect
  },
  data() {
    return {
      selectValue: null,
      options: [],
      treeData: [],
      treeProps: {
        id: "id",
        label: "label",
        children: "children"
      },
      // 是否显示弹出层
      open: false,
      // 弹出层标题
      title: "添加",
      // 添加和修改表单对象
      form: {},
      // 校验规则
      rules: {
        recoveryTitle: [{
          required: true,
          message: "不能为空"
        }]
      },

    };
  },
  created() {
    this.getList();
  },
  methods: {
    selectProject(v) {
      this.getList(v);
    },
    getList(projectId) {
      //查询项目
      this.getProject(() => {
        if (projectId) {
          this.selectValue = projectId;
        } else {
          this.selectValue = this.options[0].projectId;
        }
        this.getTree();
      });
    },
    getProject(callback) {
      listProjectByUserId()
        .then((r) => {
          this.options = r.data;
          if (callback) {
            callback();
          }
        })
        .catch(() => {
        });
    },
    getTree() {
      getRecoveryTree(this.selectValue).then((r) => {

        this.treeData = [r.data];
        // this.treeData = r.data.children;
      });
    },

    append(node, data) {
      console.log(node);
      console.log(data);
      this.reset();
      this.title ="添加";
      this.open = true;
      this.form.parentName = node.label;
      this.form.projectId = this.selectValue;
      this.form.recoveryPid = data.id;
      this.form.level = node.level;
    },
    edit(node, data) {
      console.log(node);
      console.log(data);
      this.reset();
      getRecovery(data.id).then((r) => {
        console.log("r",r);
        this.form = r.data;
        this.form.parentName = node.parent.data.label;
        this.form.projectId = this.selectValue;
        this.form.level = data.level;
      });
      this.title = "修改";
      this.open = true;

      console.log(this.form);
    },
    remove(node, data) {
      this.$modal.confirm("是否确认删除"+data.label+"?")
        .then(()=>{
          delRecovery(data.id).then((r) => {
            this.getTree();
            this.$modal.msgSuccess("删除成功");
          });
        })

    },
    // 表单重置
    reset() {
      this.form = {
        recoveryId: null,
        parentName: null,
        projectId: null,
        recoveryTitle: null,
        recoverySort: null,
        recoveryPid: null,
        level: null,
      };
      // 清除验证状态, 重置字段值
      this.resetForm("form");
    },
    save(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          if (this.form.recoveryId) {
            updateRecovery(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList(this.selectValue);
            });
          } else {
            addRecovery(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList(this.selectValue);
            });
          }
        }
      });
    },
  }
};
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>

